<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gantt Chart Webpage</title>
  <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/skins/dhtmlxgantt_material.css">
  <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
</head>
<body>
  <div id="gantt_chart" style="width: 100%; height: 500px;"></div>

  <script>
    // 初始化Gantt图
    gantt.init("gantt_chart");

    // 定义甘特图数据
    var tasks = {
      data: [
        { id: 1, text: "Taska", start_date: "11/01 2023", duration: 5 },
        { id: 2, text: "Taskb", start_date: "11/06 2023", duration: 4 },
        { id: 3, text: "Taskc", start_date: "11/11 2023", duration: 6 },
        { id: 4, text: "Taskd", start_date: "11/30 2023", duration: 6 }
      ],
      links: [
        { id: 1, source: 1, target: 2, type: "0" },
        { id: 2, source: 2, target: 3, type: "0" }
      ]
    };

    gantt.parse(tasks);
    gantt.showDate(new Date());
    gantt.attachEvent("onTaskClick", function(id) {
    // 根据任务ID跳转到其他网页
    if (id === 3) {
      window.location.href = "www.baidu.com";
    }
  });
    
  </script>
</body>
</html>
